<%--
  Created by IntelliJ IDEA.
  User: keith
  Date: 2021/8/12
  Time: 17:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>首页</title>
<%--    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/index/css/reset.css?ver=2020032717">--%>
<%--    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/index/css/style.css?ver=2020032717">--%>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/index/css/jquery.mCustomScrollbar.css?ver=20200327">
    <script src="${pageContext.request.contextPath}/static/index/js/jquery-1.11.3.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/index/js/echarts.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/index/js/jquery.table2excel.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/index/js/jquery.mCustomScrollbar.concat.min.js?ver=20200327"></script>
    <style>
        .container{
            background-color: lightblue;
        }
        .data_bar {
            width: 32%;
            float: left;
            height: 100%;
            /*border: 1px solid #3B6273;*/
        }
        .chinaMap {
            width: 60%;
            float: right;
            height: 100%;
            /*border: 1px solid #3B6273;*/
        }
    </style>
</head>
<body>
<div class="container">
    <div style="text-align: center">
        <h2>新冠肺炎疫情数据可视化系统</h2>
    </div>
    <div>
        <div id="data_bar" class="data_bar" ></div>
        <div id="chinaMap" class="chinaMap"></div>
    </div>
</div>
</body>

<script type="text/javascript">
    //柱状图
    let myChart_bar = echarts.init(document.getElementById("data_bar"));
    let provinceNameList='${provinceNameList}';
    let confirmedCountList= '${confirmedCountList}';
    let curedCountList= '${curedCountList}';
    let deadCountList= '${deadCountList}';
    let suspectedCountList= '${suspectedCountList}';
    //解析数据
    let provinceNameArr = JSON.parse(provinceNameList);
    let confirmedArr = JSON.parse(confirmedCountList);
    let curedCountArr = JSON.parse(curedCountList);
    let deadCountArr = JSON.parse(deadCountList);
    let suspectedCountArr = JSON.parse(suspectedCountList);
    getProvince(provinceNameArr,confirmedArr,curedCountArr,deadCountArr,suspectedCountArr)
    function getProvince(provinceNameArr,confirmedArr,curedCountArr,deadCountArr,suspectedCountArr){
       myChart_bar.setOption(option={
           title: {
               text: '新冠肺炎疫情地区排名',
               textStyle: {
                   color: '#0b1cb4',
                   fontSize: 15
               },
               left: 'center',
               padding: 15
           },
           tooltip: {
               trigger: 'axis',
               axisPointer: {            // Use axis to trigger tooltip
                   type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
               }
           },
           // legend: {
           //     data: ['Direct', 'Mail Ad', 'Affiliate Ad', 'Video Ad', 'Search Engine']
           // },
           grid: {
               left: '7%',
               right: '4%',
               bottom: '3%',
               containLabel: true
           },
           xAxis: {
               type: 'value'
           },
           yAxis: {
               type: 'category',
               // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
               data: provinceNameArr,
               boundaryGap:false,
               axisLabel :{
                   interval:0 ,//加这个配置,会让y轴显示所有的值
                   margin:8
               },
           },
           dataZoom: [
               {
                   type: 'slider',
                   show: true,
                   start: 0,
                   end: 100,
                   handleSize: 8
               },
               {
                   type: 'inside',
                   start: 0,
                   end: 100
               },
               {
                   type: 'slider',
                   // start: 70,
                   // end: 100,
                   // show: true,
                   // yAxisIndex: 0,
                   // filterMode: 'empty',
                   // width: 12,
                   // height: '70%',
                   // handleSize: 8,
                   // showDataShadow: false,
                   // left: '93%'
               }
           ],
           series: [
               {
                   // name: 'Direct',
                   name: '确诊',
                   type: 'bar',
                   stack: 'total',
                   // label: {
                   //     show: true
                   // },
                   emphasis: {
                       focus: 'series'
                   },
                   // data: [320, 302, 301, 334, 390, 330, 320]
                   data: confirmedArr
               },
               {
                   // name: 'Mail Ad',
                   name: '治愈',
                   type: 'bar',
                   stack: 'total',
                   // label: {
                   //     show: true
                   // },
                   emphasis: {
                       focus: 'series'
                   },
                   itemStyle:{
                       color:'#66ff00'
                   },
                   // data: [120, 132, 101, 134, 90, 230, 210]
                   data: curedCountArr
               },
               {
                   // name: 'Affiliate Ad',
                   name: '死亡',
                   type: 'bar',
                   stack: 'total',
                   // label: {
                   //     show: true
                   // },
                   emphasis: {
                       focus: 'series'
                   },
                   // data: [220, 182, 191, 234, 290, 330, 310]
                   data: deadCountArr
               },
               {
                   name: '疑似',
                   type: 'bar',
                   stack: 'total',
                   // label: {
                   //     show: true
                   // },
                   emphasis: {
                       focus: 'series'
                   },
                   // data: [150, 212, 201, 154, 190, 330, 410]
                   data: suspectedCountArr
               }
           ]
       });
   }

    //地图
    let myChart_chinaMap = echarts.init(document.getElementById("chinaMap"));
    myChart_chinaMap.showLoading();
    let mapData = '${mapList}';
    mapData = JSON.parse(mapData);
    getChinaMap();
    function getChinaMap(){
        $.get('${pageContext.request.contextPath}/static/json/china.geo.json',function (chinaJson){
            myChart_chinaMap.hideLoading();
            echarts.registerMap('china',chinaJson);
            myChart_chinaMap.setOption(option = {
                title: {
                    text: '新冠肺炎疫情全国数据',
                    textStyle: {
                        color: '#0b1cb4',
                        fontSize: 15
                    },
                    left: 'center',
                    padding: 15
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params, ticket, callback) {
                        return params.name + ', 累计确诊:'+(params.value)+'人';
                    }
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    itemSize: 22,
                    itemGap: 20,
                    left: 'right',
                    top: 'auto',
                    feature: {
                        myTool1: {
                            show: true,
                            title: '返回',
                            icon: 'image://${pageContext.request.contextPath}/static/index/images/fanhui.png',
                            onclick: function () {
                                //返回上一级
                                if(option.series[0].name!=="中国"){
                                    //刷新页面
                                    location.reload()
                                }
                            }
                        }
                    }
                },
                visualMap:[
                    {
                        type: 'piecewise',
                        min: 0,
                        max: 100000,
                        left: 'right',
                        top: 'center',
                        calculable: true,
                        realtime: false,
                        pieces: [
                            {min: 10000},
                            {min: 1000, max: 10000},
                            {min: 500, max: 999},
                            {min: 100, max: 499},
                            {min: 10, max: 99},
                            {min:0,max: 10}
                        ],
                        inRange: {
                            color: [
                                '#ffffff',
                                '#ffffbf',
                                '#fee090',
                                '#fdae61',
                                '#f46d43',
                                '#d73027',
                                '#a50026',
                                '#980000']
                        }
                    }
                ],
                series: [
                    {
                        name: '中国',
                        type: 'map',
                        mapType: 'china', // 自定义扩展图表类型
                        label: {
                            normal: {
                                show: true
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data: mapData
                    }
                ]
            });
        });
    }

    //省份名称对应json
    let provinceList=[
        [{name:"北京"},{value:"beijing"}],
        [{name:"天津"},{value:"tianjin"}],
        [{name:"上海"},{value:"shanghai"}],
        [{name:"重庆"},{value:"chongqing"}],
        [{name:"安徽"},{value:"anhui"}],
        [{name:"澳门"},{value:"aomen"}],
        [{name:"福建"},{value:"fujian"}],
        [{name:"甘肃"},{value:"gansu"}],
        [{name:"广东"},{value:"guangdong"}],
        [{name:"广西"},{value:"guangxi"}],
        [{name:"贵州"},{value:"guizhou"}],
        [{name:"海南"},{value:"hainan"}],
        [{name:"河北"},{value:"hebei"}],
        [{name:"黑龙江"},{value:"heilongjiang"}],
        [{name:"河南"},{value:"henan"}],
        [{name:"湖北"},{value:"hubei"}],
        [{name:"湖南"},{value:"hunan"}],
        [{name:"江苏"},{value:"jiangsu"}],
        [{name:"江西"},{value:"jiangxi"}],
        [{name:"吉林"},{value:"jilin"}],
        [{name:"辽宁"},{value:"liaoning"}],
        [{name:"内蒙古"},{value:"neimenggu"}],
        [{name:"宁夏"},{value:"ningxia"}],
        [{name:"青海"},{value:"qinghai"}],
        [{name:"陕西"},{value:"shaanxi"}],
        [{name:"山东"},{value:"shandong"}],
        [{name:"山西"},{value:"shanxi"}],
        [{name:"四川"},{value:"sichuan"}],
        [{name:"台湾"},{value:"taiwan"}],
        [{name:"香港"},{value:"xianggang"}],
        [{name:"新疆"},{value:"xinjiang"}],
        [{name:"西藏"},{value:"xizang"}],
        [{name:"云南"},{value:"yunnan"}],
        [{name:"浙江"},{value:"zhejiang"}],
    ]

    //单击事件,点击省份进入下级
    myChart_chinaMap.on('click',function (param){
        if(!param.name){
            return;
        }
        let clickProvince;
        let provinceShortName;
        for(let i=0;i<provinceList.length;i++){
            if(param.name===provinceList[i][0].name){
                clickProvince=provinceList[i][1].value;
                provinceShortName=param.name;
                break;
            }
        }
        if(clickProvince===undefined){
            return;
        }
        //根据省份名称去后台查询数据
        let cityData=[];
        $.ajax({
            url: "${pageContext.request.contextPath}/cityData?provinceShortName="+provinceShortName, //请求的url地址
            dataType: "json", //返回格式为json
            async: true,//请求是否异步，默认为异步，这也是ajax重要特性
            // data:{"id":"value"}, //参数值
            type: "get", //请求方式
            success: function (data) {
                cityData=data.cityMapList;
                getCityData(param, clickProvince,cityData);
                getProvince(data.nameList,data.confirmedCountList,data.curedCountList,data.deadCountList,data.suspectedCountList)
            },
            error: function () {}
        });
    })
    function getCityData(param ,clickProvince,cityData){
        $.get('${pageContext.request.contextPath}/static/json/'+clickProvince+'.json',function (provinceJson){
            myChart_chinaMap.hideLoading();
            echarts.registerMap('province',provinceJson);
            myChart_chinaMap.setOption(option = {
                title: {
                    text: '新冠肺炎疫情'+param.name+'数据',
                    textStyle: {
                        color: '#0b1cb4',
                        fontSize: 15
                    },
                    left: 'center',
                    padding: 15
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params, ticket, callback) {
                        if(params.name===""){
                            return "无确诊人数";
                        }
                        let val;
                        if(isNaN(params.value)){
                            val=0;
                        }else {
                            val=params.value;
                        }
                        return  params.name + ', 累计确诊:'+val+'人';
                    }
                },
                visualMap:[
                    {
                        type: 'piecewise',
                        min: 0,
                        max: 1000,
                        left: 'right',
                        top: 'center',
                        calculable: true,
                        realtime: false,
                        pieces: [
                            {min: 1000},
                            {min: 500, max: 1000},
                            {min: 100, max: 499},
                            {min: 10, max: 99},
                            {min:0,max: 10}
                        ],
                        inRange: {
                            color: [
                                '#ffffff',
                                '#ffffbf',
                                '#fee090',
                                '#fdae61',
                                '#f46d43',
                                '#d73027',
                                '#a50026',
                                '#980000']
                        }
                    }
                ],
                series: [
                    {
                        name: param.name,
                        type: 'map',
                        mapType: 'province', // 自定义扩展图表类型
                        label: {
                            normal: {
                                show: true
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data: cityData
                    }
                ]
            });
        });
    }
</script>

</html>
